<template>
  <Card title="书本阅读占比" :loading="loading">
    <template #extra>
      <div class="top">
        <div class="title">书本阅读占比</div>
        <Calendar
          style="margin-left: 15px; width: 100%"
          :fullscreen="false"
          @panelChange="onPanelChange"
          valueFormat="YYYY-MM"
        />
      </div>
    </template>

    <div ref="chartRef" :style="{ width, height }"></div>
  </Card>

  <!--  <div>-->
  <!--    <span style="margin-right: 5px" v-for="item in 30">刘是是</span>-->
  <!--  </div>-->
</template>
<script lang="ts" setup>
  import { Ref, ref, watch, onMounted } from 'vue';
  import { Card, Calendar } from 'ant-design-vue';
  import { useECharts } from '@/hooks/web/useECharts';
  // import { bookPieCountApi } from '@/api/sys/sysData';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  import util from '@/utils/util';

  const props = defineProps({
    loading: Boolean,
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '300px',
    },
  });
  const dateStr = ref(util.times('ym'));
  const dateType = ref('month');

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const colorArr = [
    '#5ab1ef',
    '#b6a2de',
    '#67e0e3',
    '#2ec7c9',
    '#ba55b3',
    '#e26262',
    '#b4580b',
    '#388da2',
    '#5c755c',
    '#48d1cc',
    '#B0C4DE',
    '#87CEEB',
    '#FFB6C1',
    '#2f8306',
  ];
  watch(
    () => props.loading,
    () => {
      if (props.loading) {
        return;
      }
      initFn();
    },
    { immediate: true },
  );

  function chartFn(params) {
    console.log('params:', params);
  }
  function onPanelChange(value, mode) {
    dateType.value = mode;
    let text = '';
    if (mode == 'year') {
      let arr = value.split('-');
      text = arr[0];
    } else {
      text = value;
    }
    dateStr.value = text;
    initFn();
  }
  function initFn() {
    // bookPieCountApi({
    //   dateStr: dateStr.value,
    //   dateType: dateType.value,
    // }).then((res) => {
    //   if (res.code == 200) {
    //     let list = res.data;
    //     let dataList = [];
    //     list.forEach((r) => {
    //       let json = {
    //         ...r,
    //         value: r.num,
    //         name: `《${r.bookName}》 \n ${r.num}人`,
    //       };
    //       dataList.push(json);
    //     });
    //     if (dataList.length > 0) {
    //       setOptionFn(dataList);
    //     }
    //   } else {
    //     createMessage.error(res.message);
    //   }
    // });
  }

  function splitArray(array, size) {
    var result = [];
    for (var i = 0; i < array.length; i += size) {
      result.push(array.slice(i, i + size));
    }
    return result;
  }

  function setOptionFn(arr) {
    let data = [
      { value: 50, name: '《活法》' },
      { value: 31, name: '《哲学手册》' },
      { value: 27, name: '《非暴力沟通》' },
      { value: 40, name: '《正能量》' },
      { value: 10, name: '《组织与管理》' },
    ];

    setOptions({
      tooltip: {
        trigger: 'item',
        // trigger: 'axis',
        formatter: function (params) {
          // console.log(params);
          let data = params.data;
          let num = data.num;
          let ms = ``;
          let new_arr = splitArray(data.users, 10);

          new_arr.forEach((e) => {
            ms += `<div>`;
            e.forEach((r) => {
              ms += `<span style="margin-right: 5px">${r}</span>`;
            });
            ms += `</div>`;
          });
          let txt = `<div style=\\"margin-right:4px;border-radius:10px;\\">
                  <div>《${data.bookName}》阅读人数${num}</div>
                    <div>${ms}</div>
                 </div>`;
          return txt;
        },
      },

      series: [
        {
          name: '书本阅读人数',
          type: 'treemap',
          // radius: '80%',
          center: ['50%', '50%'],
          // color: colorArr, //colorArr
          data: arr.sort(function (a, b) {
            return a.value - b.value;
          }),
          levels: [
            {
              color: [
                '#5470c6',
                '#91cc75',
                '#c08605',
                '#ee6666',
                '#73c0de',
                '#3ba272',
                '#fc8452',
                '#9a60b4',
                '#ea7ccc',
                '#388da2',
                '#5c755c',
                '#ba55b3',
                '#2f8306',
              ],
            },
          ],
          progressive: 0,
          // left: "center",
          // top: "middle",
          // width: "60%",
          // height: "60%",

          roseType: 'radius',
          animationType: 'scale',
          animationEasing: 'exponentialInOut',
          animationDelay: function () {
            return Math.random() * 400;
          },
        },
      ],
    });
  }
</script>
<style lang="less">
  .top {
    display: flex;
    justify-items: center;
    .ant-picker-panel {
      display: none;
    }
    .title {
      width: 100px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
  }
</style>
